<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<!--这是编辑供 人脉 组件-->
			<div style="width: 800px;margin: 0 auto;">
				<div style="padding-top: 10px;">
					<p class="title">编辑 供 人脉</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>标题:</label><el-input v-model="title" placeholder="请输入所求标题（不超过30个字）" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>姓名:</label><el-input v-model="name" placeholder="请输入姓名" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>年龄::</label>
						<el-select  style="width: 350px;" v-model="selectAge" placeholder="请选择">
						    <el-option v-for="item in ageOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>性别::</label>
						<el-select  style="width: 350px;" v-model="selectSex" placeholder="请选择">
						    <el-option key="0" label="男" value="男"></el-option>
						    <el-option key="1" label="女" value="女"></el-option>
						    <el-option key="2" label="保密" value="保密"></el-option>
						</el-select>
					</p>
					<div class="label-p">
						<label for="" style="float: left;"><span style="color: red">*</span>所在地区:</label>
						<v-distpicker :province="citySelect.province" :city="citySelect.city" :area="citySelect.area" style="float: left;"></v-distpicker>
					</div>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>行业::</label>
						<el-select  style="width: 350px;" v-model="selectTrade" placeholder="请选择">
						    <el-option v-for="item in tradeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p" >
						<label for=""><span style="color: red">*</span>职务:</label><el-input v-model="duty" placeholder="请输入职务" style="width: 350px;"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>资产::</label>
						<el-select  style="width: 350px;" v-model="selectAsset" placeholder="请选择">
						    <el-option v-for="item in assetOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>是否单身:</label>
						<el-select  style="width: 350px;" v-model="selectSingle" placeholder="请选择">
						    <el-option key="0" label="是" value="是"></el-option>
						    <el-option key="1" label="否" value="否"></el-option>
						    <el-option key="2" label="保密" value="保密"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for="">爱好:</label><el-input v-model="hobby" placeholder="请输入爱好" style="width: 350px"></el-input>
					</p>
					<p class="label-p" >
						<label for="">详细描述:</label><el-input v-model="describe" placeholder="详细描述下您的优势！(非必填，不超过100个字)" style="width: 350px;"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>联系人:</label><el-input v-model="contact" placeholder="请填写联系人" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>联系方式:</label><el-input v-model="phone" placeholder="请填写联系方式" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for="">微信号:</label><el-input v-model="wechatNum" placeholder="请填写微信号" style="width: 350px"></el-input>
					</p>
				</div>
				<p style="text-align: center;line-height: 50px;margin-top: 10px;">
					<el-button type="primary">保存</el-button>
					<el-button type="info" @click="closeAdd">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import Sticky from '@/components/Sticky'
import VDistpicker from 'v-distpicker' // 引入城市选择器插件
export default {
  components: {
    Sticky,
    VDistpicker
  },
  data() {
    return {
      title: null, // 所求标题
      name: null, // 姓名
      selectAge: null, // 年龄
      selectSex: null, // 性别
      citySelect: { province: '福建省', city: '厦门市', area: '集美区' }, // 所在地区
      selectTrade: null, // 行业
      duty: null, // 职务
      selectAsset: null, // 资产
      selectSingle: null, // 是否单身
      hobby: null, // 爱好
      describe: null, // 爱好的详细描述
      capital: null, // 希望资金
      uses: null, // 资金用途
      checkList: [], // 行业要求（多选）
      contact: null, // 联系人
      phone: null, // 联系方式
      wechatNum: null, // 微信号
      tradeOption: [
        {
          id: 0,
          value: '医疗'
        },
        {
          id: 1,
          value: '互联网'
        },
        {
          id: 2,
          value: '文化旅游'
        },
        {
          id: 3,
          value: '高科技'
        },
        {
          id: 4,
          value: '房地产'
        },
        {
          id: 5,
          value: '金融'
        },
        {
          id: 6,
          value: '其他'
        }
      ],
      ageOption: [
        {
          id: 0,
          value: '1-10'
        },
        {
          id: 1,
          value: '11-20'
        },
        {
          id: 2,
          value: '21-30'
        },
        {
          id: 3,
          value: '31-40'
        },
        {
          id: 4,
          value: '41-50'
        },
        {
          id: 5,
          value: '51-60'
        },
        {
          id: 6,
          value: '61-70'
        },
        {
          id: 7,
          value: '71-80'
        },
        {
          id: 8,
          value: '81-90'
        },
        {
          id: 9,
          value: '91-99'
        }
      ],
      assetOption: [
        {
          id: 0,
          value: '无资产要求'
        },
        {
          id: 1,
          value: '100万以下'
        },
        {
          id: 2,
          value: '100-500万'
        },
        {
          id: 3,
          value: '500-1000万'
        },
        {
          id: 4,
          value: '100-5000万'
        },
        {
          id: 5,
          value: '5000万-1亿'
        },
        {
          id: 6,
          value: '1亿以上'
        },
        {
          id: 7,
          value: '保密'
        }
      ]
    }
  },
  methods: {
    closeAdd() {
      this.$emit('hideOfferPeople', false)
    }
  }
}
</script>
<style scoped>
	p,h3,h1 {margin:0;padding:0}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 110;
	}
	.addBox {
		width: 700px;
		height: 500px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 25%;
		top: 15%;
		z-index: 120;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		position: fixed;
		width: 700px;
		line-height: 36px;
		padding: 0 10px;
	}
	.fixTitle p{
		position: absolute;
		right: 30px;
		top: 0px;
	}
	.fixTitle p a{
		padding: 0 10px;
	}
	.text-c{
		text-align: center;
	}
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
	label {
		font-weight: 500;
		width: 150px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
	.label-p{
		line-height: 50px;
		overflow: hidden;
	}
	.el-checkbox{
	    width: 75px;
        margin-left: 0; 
	}
</style>